<style>
.el-carousel__item img {
    width: 100%;
    height: 462px;
}
</style>

<style scoped lang='scss'>
.wrapper {
    width: 100%;
    .path-wrapper {
        width: 100%;
        background-image: url('../assets/applet/业务链路流程_bg.png');
        background-repeat: no-repeat;
        padding: 80px 0;
        .title {
            width: 240px;
            height: 40px;
            font-size: 40px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(13, 26, 38, 1);
            line-height: 40px;
            margin: 0 auto 80px;
        }
        .path-item {
            display: flex;
            width: 980px;
            margin: 0 auto;
            li {
                margin-right: 70px;
                .path-icon {
                    width: 54px;
                    height: 54px;
                    margin: 0 auto 20px;
                }
                .path-name {
                    width: 40px;
                    height: 20px;
                    font-size: 20px;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    color: rgba(13, 26, 38, 1);
                    line-height: 20px;
                    margin: 0 auto;
                }
                .path-desc {
                    width: 140px;
                    height: 44px;
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: rgba(102, 102, 102, 1);
                    line-height: 22px;
                    margin: 25px auto 0;
                }
            }
        }
    }
    .case-wrapper {
        width: 100%;
        height: 550px;
        padding: 80px 300px;
        box-sizing: border-box;
        .title {
            width: 160px;
            height: 40px;
            font-size: 40px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(13, 26, 38, 1);
            line-height: 40px;
            margin: 0 auto 80px;
        }
        .case-item {
            display: flex;
            justify-content: center;
            li {
                width: 240px;
                height: 270px;
                background: rgba(255, 255, 255, 1);
                box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.1);
                border: 1px solid rgba(186, 189, 200, 1);
                margin-right: 40px;
                padding: 30px 37px;
                box-sizing: border-box;
                p {
                    width: 80px;
                    height: 20px;
                    font-size: 20px;
                    font-family: PingFangSC-Semibold, PingFang SC;
                    font-weight: 600;
                    color: rgba(13, 26, 38, 1);
                    line-height: 20px;
                    margin: 0 auto 24px;
                }
                .erweima {
                    width: 166px;
                    height: 166px;
                }
            }
        }
    }
    .chajian-wrapper {
        width: 100%;
        height: 1126px;
        background: rgba(55, 63, 94, 1);
        padding: 80px 0 80px;
        box-sizing: border-box;
        .show-wrapper {
            width: 1200px;
            // height: 589px;
            margin: 0 auto;
            display: flex;
            padding: 50px;
            box-sizing: border-box;
            background: linear-gradient(
                270deg,
                rgba(239, 239, 239, 1) 0%,
                rgba(255, 255, 255, 1) 100%
            );
            .left {
                width: 480px;
                margin-left: 60px;
                margin-right: 150px;
                .left-title {
                    border-bottom: 1px solid rgba(186, 189, 200, 1);
                    p {
                        width: 154px;
                        height: 22px;
                        font-size: 22px;
                        font-family: PingFangSC-Semibold, PingFang SC;
                        font-weight: 600;
                        color: rgba(13, 26, 38, 1);
                        line-height: 22px;
                        padding-bottom: 21px;
                    }
                }
                .left-content {
                    width: 480px;
                    height: 108px;
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: rgba(13, 26, 38, 1);
                    line-height: 22px;
                    margin-top: 32px;
                }
                .left-item {
                    margin-top: 80px;
                    display: flex;
                    justify-content: center;
                    li {
                        width: 128px;
                        height: 164px;
                        background: rgba(255, 255, 255, 1);
                        box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.05);
                        border-radius: 4px;
                        margin-right: 20px;
                        .left-icon {
                            width: 56px;
                            height: 56px;
                            margin: 26px auto 27px;
                        }
                        .left-name {
                            width: 36px;
                            height: 18px;
                            font-size: 18px;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: rgba(13, 26, 38, 1);
                            line-height: 18px;
                            margin: 0 auto;
                        }
                    }
                }
            }
            .right {
                flex: 1;
                width: 460px;
                height: 489px;
                background: rgba(216, 216, 216, 1);
            }
        }
        .detail-wrapper {
            .title {
                width: 280px;
                height: 40px;
                font-size: 40px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: rgba(255, 255, 255, 1);
                line-height: 40px;
                margin: 80px auto 20px;
            }
            .desc {
                width: 300px;
                height: 20px;
                font-size: 20px;
                font-family: PingFangSC-Light, PingFang SC;
                font-weight: 300;
                color: rgba(255, 255, 255, 1);
                line-height: 20px;
                margin: 0 auto 80px;
            }
            .chajian-item {
                width: 840px;
                display: flex;
                margin: 0 auto;
                li {
                    margin-right: 60px;
                    .icon {
                        width: 120px;
                        height: 120px;
                    }
                    .icon-desc {
                        height: 24px;
                        font-size: 24px;
                        font-family: PingFangSC-Medium, PingFang SC;
                        font-weight: 500;
                        color: rgba(255, 255, 255, 1);
                        line-height: 24px;
                        text-align: center;
                        margin-top: 20px;
                    }
                }
            }
        }
    }
    .houtai-wrapper {
        .title {
            width: 280px;
            height: 40px;
            font-size: 40px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(13, 26, 38, 1);
            line-height: 40px;
            margin: 80px auto 20px;
        }
        .desc {
            width: 380px;
            height: 20px;
            font-size: 20px;
            font-family: PingFangSC-Light, PingFang SC;
            font-weight: 300;
            color: rgba(13, 26, 38, 1);
            line-height: 20px;
            margin: 0 auto 80px;
        }
        .inner-group {
            display: flex;
            width: 1200px;
            height: 607px;
            background: linear-gradient(
                270deg,
                rgba(255, 255, 255, 1) 0%,
                rgba(246, 246, 246, 1) 100%
            );
            padding: 50px 0 0 60px;
            box-sizing: border-box;
            margin: 0 auto 80px;
            .img {
                width: 460px;
                height: 460px;
                background: rgba(216, 216, 216, 1);
            }
            .houtai-items {
                li {
                    padding: 40px 50px 38px 40px;
                    margin-bottom: 30px;
                    border-radius: 4px;
                    box-sizing: border-box;
                    position: relative;
                    width: 490px;
                    height: 140px;
                    background: rgba(255, 255, 255, 1);
                    box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.05);
                    border-radius: 4px;
                    margin-left: 112px;
                    &.second {
                        margin-left: 192px;
                    }
                    .houtai-title {
                        height: 20px;
                        font-size: 20px;
                        font-family: PingFangSC-Semibold, PingFang SC;
                        font-weight: 600;
                        color: rgba(13, 26, 38, 1);
                        line-height: 20px;
                        &.active {
                            color: rgba(47, 84, 235, 1);
                        }
                    }
                    .houtai-content {
                        margin-top: 20px;
                        font-size: 14px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: rgba(102, 102, 102, 1);
                        line-height: 22px;
                    }
                    p {
                        position: absolute;
                        right: 30px;
                        top: 20px;
                        width: 39px;
                        height: 40px;
                        font-size: 40px;
                        font-family: DINAlternate-Bold, DINAlternate;
                        font-weight: bold;
                        color: rgba(233, 240, 255, 1);
                        line-height: 40px;
                    }
                }
            }
        }
    }
    .video-wrapper {
        width: 100%;
        background: rgba(248, 249, 250, 1);
        padding: 80px 0;
        .video-inner-group {
            display: flex;
            width: 1176px;
            margin: 0 auto;
            .video-group {
                .player-container {
                    width: 590px;
                    height: 432px;
                    background: rgba(38, 38, 38, 1);
                    margin-bottom: 16px;
                }
                .little {
                    display: flex;
                    li {
                        .little-container {
                            width: 186px;
                            height: 108px;
                            background: rgba(128, 128, 128, 1);
                            margin-right: 16px;
                            margin-bottom: 12px;
                            &.active {
                                border: 2px solid rgba(26, 116, 232, 1);
                            }
                        }
                        .little-name {
                            height: 14px;
                            font-size: 14px;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: rgba(13, 26, 38, 1);
                            line-height: 14px;
                        }
                    }
                }
            }
            .case-content-right {
                width: 430px;
                height: 366px;
                background: rgba(255, 255, 255, 1);
                box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.05);
                border-radius: 4px;
                margin-left: 180px;
                padding: 40px 55px 58px 55px;
                box-sizing: border-box;
                margin-top: 66px;
                .contact-title {
                    width: 80px;
                    height: 16px;
                    font-size: 20px;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    color: rgba(13, 26, 38, 1);
                    line-height: 16px;
                }
                input {
                    margin-top: 30px;
                    width: 320px;
                    height: 38px;
                    background: rgba(255, 255, 255, 1);
                    border: 1px solid rgba(221, 223, 230, 1);
                    padding: 12px 14px;
                    box-sizing: border-box;
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: rgba(186, 189, 200, 1);
                }
                .join {
                    margin-top: 30px;
                    width: 320px;
                    height: 38px;
                    background: rgba(47, 84, 235, 1);
                    text-align: center;
                    span {
                        width: 56px;
                        height: 14px;
                        font-size: 14px;
                        font-family: PingFangSC-Medium, PingFang SC;
                        font-weight: 500;
                        color: rgba(255, 255, 255, 1);
                        line-height: 38px;
                    }
                }
            }
        }
    }
}
</style>

<template>
    <div class="wrapper">
        <div class="banner-group" id="banner-group">
            <el-carousel trigger="click" height="462px">
                <el-carousel-item>
                    <a href="#">
                        <img src="https://static-image.xfz.cn/1523588994_243.jpg" alt="">
                    </a>
                </el-carousel-item>
                <el-carousel-item>
                    <a href="#">
                        <img src="https://static-image.xfz.cn/1523504442_455.png" alt="">
                    </a>
                </el-carousel-item>
                <el-carousel-item>
                    <a href="#">
                        <img src="https://static-image.xfz.cn/1521444982_469.jpg" alt="">
                    </a>
                </el-carousel-item>
                <el-carousel-item>
                    <a href="#">
                        <img src="https://static-image.xfz.cn/1522742329_629.png" alt="">
                    </a>
                </el-carousel-item>
                <el-carousel-item>
                    <a href="#">
                        <img src="https://static-image.xfz.cn/1525669927_166.jpg" alt="">
                    </a>
                </el-carousel-item>
            </el-carousel>
        </div>
        <div class="path-wrapper">
            <p class="title">业务链路流程</p>
            <ul class="path-item">
                <li>
                    <div class="path-icon"><img src="../assets/applet/外卖.png" alt=""></div>
                    <div class="path-name">外卖</div>
                    <div class="path-desc">从下单到配送，实现一体化解决方案</div>
                </li>
                <li>
                    <div class="path-icon"><img src="../assets/applet/拉新.png" alt=""></div>
                    <div class="path-name">拉新</div>
                    <div class="path-desc">从下单到配送，实现一体化解决方案</div>
                </li>
                <li>
                    <div class="path-icon"><img src="../assets/applet/沉淀.png" alt=""></div>
                    <div class="path-name">沉淀</div>
                    <div class="path-desc">从下单到配送，实现一体化解决方案</div>
                </li>
                <li>
                    <div class="path-icon"><img src="../assets/applet/复购.png" alt=""></div>
                    <div class="path-name">复购</div>
                    <div class="path-desc">从下单到配送，实现一体化解决方案</div>
                </li>
                <li>
                    <div class="path-icon"><img src="../assets/applet/唤醒.png" alt=""></div>
                    <div class="path-name">唤醒</div>
                    <div class="path-desc">从下单到配送，实现一体化解决方案</div>
                </li>
            </ul>
        </div>
        <div class="video-wrapper">
            <div class="video-inner-group">
                <div class="video-group">
                    <div class="player-container"></div>
                    <ul class="little">
                        <li>
                            <div class="little-container active"></div>
                            <div class="little-name">匠把头小程序</div>
                        </li>
                        <li>
                            <div class="little-container"></div>
                            <div class="little-name">操作教程</div>
                        </li>
                        <li>
                            <div class="little-container"></div>
                            <div class="little-name">场景化案例</div>
                        </li>
                    </ul>
                </div>
                <div class="case-content-right">
                    <div class="contact-title">免费咨询</div>
                    <input type="text" placeholder="对您的称呼">
                    <input type="text" placeholder="联系电话">
                    <input type="text" placeholder="意向回访时间">
                    <div class="join"><span>我要加入</span></div>
                </div>
            </div>
        </div>
        <div class="case-wrapper">
            <p class="title">经典案例</p>
            <ul class="case-item">
                <li>
                    <p class="case-name">餐饮模板</p>
                    <div class="erweima">
                        <img src="../assets/applet/餐饮.png" alt="">
                    </div>
                </li>
                <li>
                    <p class="case-name">商超模板</p>
                    <div class="erweima">
                        <img src="../assets/applet/商超.png" alt="">
                    </div>
                </li>
                <li>
                    <p class="case-name">水果模板</p>
                    <div class="erweima">
                        <img src="../assets/applet/水果.png" alt="">
                    </div>
                </li>
                <li>
                    <p class="case-name">社区模板</p>
                    <div class="erweima">
                        <img src="../assets/applet/社区.png" alt="">
                    </div>
                </li>
            </ul>
        </div>
        <div class="chajian-wrapper">
            <div class="show-wrapper">
                <div class="left">
                    <div class="left-title">
                        <p>单店/商城/平台</p>
                    </div>
                    <div class="left-content">描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字</div>
                    <ul class="left-item">
                        <li>
                            <div class="left-icon"><img src="../assets/applet/单店.png" alt=""></div>
                            <p class="left-name">单店</p>
                        </li>
                        <li>
                            <div class="left-icon"><img src="../assets/applet/商城.png" alt=""></div>
                            <p class="left-name">商城</p>
                        </li>
                        <li>
                            <div class="left-icon"><img src="../assets/applet/商城.png" alt=""></div>
                            <p class="left-name">平台</p>
                        </li>
                    </ul>
                </div>
                <div class="right"></div>
            </div>
            <div class="detail-wrapper">
                <p class="title">丰富的营销插件</p>
                <p class="desc">有效降低获客成本，让你事半功倍</p>
                <ul class="chajian-item">
                    <li>
                        <div class="icon"><img src="../assets/applet/会员.png" alt=""></div>
                        <p class="icon-desc">会员</p>
                    </li>
                    <li>
                        <div class="icon"><img src="../assets/applet/拼团.png" alt=""></div>
                        <p class="icon-desc">拼团</p>
                    </li>
                    <li>
                        <div class="icon"><img src="../assets/applet/秒杀.png" alt=""></div>
                        <p class="icon-desc">秒杀</p>
                    </li>
                    <li>
                        <div class="icon"><img src="../assets/applet/一键海报.png" alt=""></div>
                        <p class="icon-desc">一键海报</p>
                    </li>
                    <li>
                        <div class="icon"><img src="../assets/applet/持续增加.png" alt=""></div>
                        <p class="icon-desc">持续增加</p>
                    </li>
                </ul>
            </div>
        </div>
        <div class="houtai-wrapper">
            <p class="title">全面的后台能力</p>
            <p class="desc">从用户数据到物流，给您更全面的服务保证</p>
            <div class="inner-group">
                <div class="img"></div>
                <ul class="houtai-items">
                    <li>
                        <div class="houtai-title">全面的后台能力</div>
                        <div class="houtai-content">从用户数据到物流，给您更全面的服务保证</div>
                        <p>01</p>
                    </li>
                    <li class="second">
                        <div class="houtai-title">收银对接，支付对接</div>
                        <div class="houtai-content">从用户数据到物流，给您更全面的服务保证</div>
                        <p>02</p>
                    </li>
                    <li>

                        <div class="houtai-title">全面的会员体系</div>
                        <div class="houtai-content">为会员定制个性化的精准营销方案，通过营销工具帮助您拉新，转化，复购，让老用户带来更多新用户</div>
                        <p>03</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
import { CarouselItem, Carousel } from "element-ui"
export default {
    name: "Index",
    data() {
        return {}
    },
    components: {
        [Carousel.name]: Carousel,
        [CarouselItem.name]: CarouselItem
    }
}
</script>

